<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${job.title} + ' - 岗位详情 - SimpleHire'">岗位详情 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .job-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .skill-tag {
            background-color: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            margin: 0.25rem;
            display: inline-block;
        }
        .info-card {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .upload-area.dragover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }
        .file-info {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }
        .match-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-briefcase-fill me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reports">报告中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><a class="dropdown-item" href="/job-matching/manage">岗位管理</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 返回按钮 -->
        <div class="mb-3">
            <a href="/job-matching" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>返回岗位列表
            </a>
        </div>

        <!-- 岗位头部信息 -->
        <div class="job-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 mb-2" th:text="${job.title}">岗位标题</h1>
                    <h4 class="mb-3">
                        <i class="bi bi-building me-2"></i>
                        <span th:text="${job.companyName}">公司名称</span>
                    </h4>
                    <div class="d-flex flex-wrap gap-3">
                        <span th:if="${job.workLocation}">
                            <i class="bi bi-geo-alt me-1"></i>
                            <span th:text="${job.workLocation}">工作地点</span>
                        </span>
                        <span th:if="${job.salaryRange}">
                            <i class="bi bi-currency-dollar me-1"></i>
                            <span th:text="${job.salaryRange}">薪资范围</span>
                        </span>
                        <span th:if="${job.jobType}">
                            <i class="bi bi-briefcase me-1"></i>
                            <span th:text="${job.jobType}">工作类型</span>
                        </span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="mb-2">
                        <small>发布时间：<span th:text="${#temporals.format(job.createdAt, 'yyyy-MM-dd HH:mm')}">时间</span></small>
                    </div>
                    <div class="mb-2">
                        <small>更新时间：<span th:text="${#temporals.format(job.updatedAt, 'yyyy-MM-dd HH:mm')}">时间</span></small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 左侧：岗位详情 -->
            <div class="col-lg-8">
                <!-- 岗位描述 -->
                <div class="card info-card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-file-text me-2"></i>岗位描述
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(job.description, '\n', '<br>')}">岗位描述内容...</div>
                    </div>
                </div>

                <!-- 职责要求 -->
                <div class="card info-card mb-4" th:if="${job.responsibilities}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-list-check me-2"></i>工作职责
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(job.responsibilities, '\n', '<br>')}">工作职责内容...</div>
                    </div>
                </div>

                <!-- 技能要求 -->
                <div class="card info-card mb-4" th:if="${job.requiredSkills}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-gear me-2"></i>技能要求
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:each="skill : ${job.requiredSkills}" class="skill-tag" th:text="${skill}">技能</div>
                    </div>
                </div>

                <!-- 任职要求 -->
                <div class="card info-card mb-4" th:if="${job.requirements}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-person-check me-2"></i>任职要求
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(job.requirements, '\n', '<br>')}">任职要求内容...</div>
                    </div>
                </div>

                <!-- 福利待遇 -->
                <div class="card info-card mb-4" th:if="${job.benefits}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-gift me-2"></i>福利待遇
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(job.benefits, '\n', '<br>')}">福利待遇内容...</div>
                    </div>
                </div>
            </div>

            <!-- 右侧：简历匹配 -->
            <div class="col-lg-4">
                <!-- 基本信息 -->
                <div class="card info-card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>基本信息
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-2">
                            <div class="col-6" th:if="${job.industry}">
                                <strong>行业：</strong><br>
                                <span th:text="${job.industry}">行业</span>
                            </div>
                            <div class="col-6" th:if="${job.experienceLevel}">
                                <strong>经验：</strong><br>
                                <span th:text="${job.experienceLevel}">经验要求</span>
                            </div>
                            <div class="col-6" th:if="${job.educationLevel}">
                                <strong>学历：</strong><br>
                                <span th:text="${job.educationLevel}">学历要求</span>
                            </div>
                            <div class="col-6" th:if="${job.jobType}">
                                <strong>类型：</strong><br>
                                <span th:text="${job.jobType}">工作类型</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 简历匹配区域 -->
                <div class="match-section">
                    <h5 class="mb-3">
                        <i class="bi bi-search me-2"></i>简历匹配分析
                    </h5>
                    
                    <!-- 消息提示 -->
                    <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-2"></i>
                        <span th:text="${success}"></span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    
                    <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <span th:text="${error}"></span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>

                    <!-- 文件上传表单 -->
                    <form th:action="@{/job-matching/match}" method="post" enctype="multipart/form-data" id="matchForm">
                        <input type="hidden" name="jobId" th:value="${job.id}">
                        
                        <!-- 上传方式选择 -->
                        <div class="mb-3">
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="uploadType" id="fileUpload" value="file" checked>
                                <label class="btn btn-outline-primary" for="fileUpload">
                                    <i class="bi bi-file-earmark-arrow-up me-1"></i>文件上传
                                </label>
                                
                                <input type="radio" class="btn-check" name="uploadType" id="textInput" value="text">
                                <label class="btn btn-outline-primary" for="textInput">
                                    <i class="bi bi-textarea-t me-1"></i>文本输入
                                </label>
                            </div>
                        </div>

                        <!-- 文件上传区域 -->
                        <div id="fileUploadArea">
                            <div class="upload-area" onclick="document.getElementById('resumeFile').click()">
                                <i class="bi bi-cloud-upload display-4 text-muted mb-3"></i>
                                <h6>点击或拖拽上传简历文件</h6>
                                <p class="text-muted mb-0">支持 PDF、DOC、DOCX 格式，最大 10MB</p>
                                <input type="file" id="resumeFile" name="resumeFile" 
                                       accept=".pdf,.doc,.docx" style="display: none;">
                            </div>
                            <div id="fileInfo" class="file-info" style="display: none;">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-file-earmark-text me-2"></i>
                                    <div class="flex-grow-1">
                                        <div id="fileName" class="fw-bold"></div>
                                        <div id="fileSize" class="text-muted small"></div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearFile()">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 文本输入区域 -->
                        <div id="textInputArea" style="display: none;">
                            <div class="mb-3">
                                <label for="resumeText" class="form-label">简历内容</label>
                                <textarea class="form-control" id="resumeText" name="resumeText" 
                                          rows="8" placeholder="请粘贴您的简历内容..."></textarea>
                            </div>
                        </div>

                        <!-- 分析选项 -->
                        <div class="mb-3">
                            <label class="form-label">分析选项</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="detailedAnalysis" 
                                       name="detailedAnalysis" checked>
                                <label class="form-check-label" for="detailedAnalysis">
                                    详细分析报告
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="improvementSuggestions" 
                                       name="improvementSuggestions" checked>
                                <label class="form-check-label" for="improvementSuggestions">
                                    改进建议
                                </label>
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                                <i class="bi bi-search me-2"></i>开始匹配分析
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 相关岗位推荐 -->
                <div class="card info-card mt-4" th:if="${relatedJobs}">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-lightbulb me-2"></i>相关岗位推荐
                        </h6>
                    </div>
                    <div class="card-body">
                        <div th:each="relatedJob : ${relatedJobs}" class="mb-2">
                            <a th:href="@{/job-matching/job/{id}(id=${relatedJob.id})}" 
                               class="text-decoration-none">
                                <div class="fw-bold" th:text="${relatedJob.title}">岗位标题</div>
                                <div class="text-muted small" th:text="${relatedJob.companyName}">公司名称</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script>
        // 上传方式切换
        document.querySelectorAll('input[name="uploadType"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const fileArea = document.getElementById('fileUploadArea');
                const textArea = document.getElementById('textInputArea');
                
                if (this.value === 'file') {
                    fileArea.style.display = 'block';
                    textArea.style.display = 'none';
                    document.getElementById('resumeText').value = '';
                } else {
                    fileArea.style.display = 'none';
                    textArea.style.display = 'block';
                    clearFile();
                }
            });
        });

        // 文件选择处理
        document.getElementById('resumeFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                showFileInfo(file);
            }
        });

        // 拖拽上传
        const uploadArea = document.querySelector('.upload-area');
        
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                if (file.type === 'application/pdf' || 
                    file.type === 'application/msword' || 
                    file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                    document.getElementById('resumeFile').files = files;
                    showFileInfo(file);
                } else {
                    alert('请上传 PDF、DOC 或 DOCX 格式的文件');
                }
            }
        });

        // 显示文件信息
        function showFileInfo(file) {
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = formatFileSize(file.size);
            document.getElementById('fileInfo').style.display = 'block';
            document.querySelector('.upload-area').style.display = 'none';
        }

        // 清除文件
        function clearFile() {
            document.getElementById('resumeFile').value = '';
            document.getElementById('fileInfo').style.display = 'none';
            document.querySelector('.upload-area').style.display = 'block';
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 表单提交处理
        document.getElementById('matchForm').addEventListener('submit', function(e) {
            const uploadType = document.querySelector('input[name="uploadType"]:checked').value;
            const submitBtn = document.getElementById('submitBtn');
            
            if (uploadType === 'file') {
                const fileInput = document.getElementById('resumeFile');
                if (!fileInput.files.length) {
                    e.preventDefault();
                    alert('请选择要上传的简历文件');
                    return;
                }
            } else {
                const textInput = document.getElementById('resumeText');
                if (!textInput.value.trim()) {
                    e.preventDefault();
                    alert('请输入简历内容');
                    return;
                }
            }
            
            // 显示加载状态
            submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>分析中...';
            submitBtn.disabled = true;
        });
    </script>
</body>
</html>